<template>
	<view class="application-item" v-show="hasPermi(has)">
		<uni-section titleFontSize="16px" :title="title"></uni-section>
		<view class="application-item-content">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item, index) in appList" :key="index" :name="item.path" @click="handleClick(item)" v-show="hasPermi(item.has)">
					<view class="grid-item">
						<image :src="getImgUrl(item.icon)" class="grid-img"></image>
						<view class="grid-text textmp-1">{{ item.name }}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script setup>
// 卡片组件
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	has: {
		type: Array,
		default: () => []
	},
	appList: {
		type: Array,
		default: () => []
	}
});

// 页面跳转
function handleClick(item) {
	if (item.path) {
		if (item.path == '/pages/application/application') {
			uni.switchTab({
				url: item.path
			});
		} else {
			if (item.address === '') {
				uni.showToast({
					title: '子厂商对接中...',
					icon: 'error'
				});
			} else {
				uni.navigateTo({
					url: item.address ? `${item.path}?route=${item.address}` : item.path
				});
			}
		}
	} else {
		uni.showToast({
			title: '页面开发中...',
			icon: 'error'
		});
	}
}
</script>

<style lang="scss" scoped>
.application-item {
	background: #fff;
	// box-shadow: 0 0 5px 2px #2172FC;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 10px;
	width: 100%;

	+ .application-item {
		margin-top: 16rpx;
	}

	.application-item-title {
		color: $title-color;
		box-sizing: border-box;
		font-size: 30rpx;
		font-weight: bold;
	}

	:deep(.uni-section-header) {
		padding: 0px !important;

		.uni-section-header__decoration.line {
			height: 16px;
		}

		.uni-section__content-title {
			color: #272c35 !important;
			font-weight: bold;
		}
	}

	.application-item-content {
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-bottom: -14px;

		.grid-item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 160rpx;
			width: 100%;

			.grid-img {
				width: 100rpx;
				height: 100rpx;
			}

			.grid-text {
				color: $text-color;
				font-size: 12px;
				text-align: center;
				width: 90%;
			}
		}
	}
}

:deep(.u-badge) {
	position: relative;
	animation: badgeAni 2s cubic-bezier(0.1, 0.25, 1, 0.25) forwards;
	pointer-events: auto;
}

.tip {
	font-size: 12px;
	color: gainsboro;
	position: absolute;
	top: -10px;
	right: 0px;
}

@keyframes overly {
	from {
		transform: rotate(0deg);
	}

	4% {
		transform: rotate(5deg);
	}

	12.5% {
		transform: rotate(-5deg);
	}

	21% {
		transform: rotate(5deg);
	}

	29% {
		transform: rotate(-5deg);
	}

	37.5% {
		transform: rotate(5deg);
	}

	46% {
		transform: rotate(-5deg);
	}

	50%,
	to {
		transform: rotate(0deg);
	}
}

@keyframes badgeAni {
	0% {
		z-index: 100;
	}

	50% {
		z-index: 1000;
	}

	100% {
		z-index: 119999;
	}
}
</style>
